<template>
  <div class="manageContent">
    <SelfTitle userName="超级管理员用户"></SelfTitle>
    <!-- 头部搜索框 -->
    <div class="manageSearch">
      <div class="addManageInput">
        <el-input placeholder="请输入姓名" v-model="username"></el-input>
      </div>
      <el-button @click="resSearchAdmin">搜索</el-button>
      <el-button @click="cancelSearch">取消</el-button>
      <el-button @click="createManageUser">创建用户</el-button>
      <el-button @click="seeUser">其他用户</el-button>
    </div>

    <div class="tableBox">
      <div class="table-header-title">
        <i class="el-icon-user-solid"></i>
        <span>管理用户</span>
        <span>
          导出
          <i class="el-icon-s-unfold"></i>
        </span>
      </div>
      <el-table
        :data="users"
        style="width: 100%"
        :header-cell-style="{
          background: '#E9E9E9',
          color: '#606266',
          fontWeight: 600,
        }"
      >
        <el-table-column label="序号" width="80" type="index" align="center">
        </el-table-column>
        <el-table-column prop="username" label="姓名" width="140" align="center">
        </el-table-column>
        <el-table-column prop="telephone" label="联系方式" align="center">
        </el-table-column>
        <el-table-column prop="email" label="邮箱" align="center">
        </el-table-column>
       

        <el-table-column prop="work" label="操作" width="140" align="center">
          <template slot-scope="scope">
            <el-button @click="deleteManageUser(scope)" type="text"
             size="mini"
              >删除</el-button
            >
           <el-button
                size="mini"
                @click="findShopFans(scope.row.id, 1)"
                type="text"
                v-if="scope.row.status === 0"
                >禁用</el-button
              >
              <el-button
                size="mini"
                @click="findShopFans(scope.row.id, 0)"
                type="text"
                v-else
                >取消禁用</el-button
              >
          </template>
        </el-table-column>
      </el-table>
    </div>
     <ul class="ul-isShowMob">
          <li
            v-for="(item, index) in users"
            :key="'users' + index"
            @click="enterMoreUserInfo(item.id)"
          >
            <i class="el-icon-user"></i>
            <span>{{ item.username}}</span>
          </li>
      </ul>
   <el-dialog :visible.sync="addManageVisible" width="500px" class="create-user-box">
     <h2>创建用户</h2>
      <el-form
        :model="Registerform"
        class="RegisterForm"
        :rules="registerRules"
        label-position="left"
        label-width="100px"
      >
        <el-form-item label="请选择身份" :label-width="formLabelWidth" prop="radio">
          <el-radio-group v-model="Registerform.radio" class="selectRadio">
            <el-radio
                    v-model="Registerform.radio"
                    v-for="(item,index) in radioArr"
                    :key="index"
                    :label="item.id"
            >{{item.name}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="用户名" :label-width="formLabelWidth" prop="username">
          <el-input
            type="text"
            v-model="Registerform.username"
            autocomplete="off"
            placeholder="请输入您的用户名"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="联系方式" :label-width="formLabelWidth" prop="telphone">
          <el-input
            type="text"
            v-model="Registerform.telphone"
            autocomplete="off"
            placeholder="请输入您的联系方式"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth" prop="email">
          <el-input
            type="text"
            v-model="Registerform.email"
            autocomplete="off"
            placeholder="请输入您的邮箱"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth" prop="password">
          <el-input
            type="password"
            v-model="Registerform.password"
            autocomplete="off"
            placeholder="请输入密码"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" :label-width="formLabelWidth" prop="checkPass">
          <el-input
            type="password"
            v-model="Registerform.checkPass"
            autocomplete="off"
            placeholder="请再次输入密码"
            clearable
          ></el-input>
        </el-form-item>
      </el-form>
      <div class="btnBox">
        <el-button @click="addManageVisible = false">取 消</el-button>
        <el-button type="primary" @click="register">注 册</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import SelfTitle from "@/components/SelfTitle.vue";
import {ReqadminList,ReqRegister,ReqSearchAdmin,ReqDeleteUser,ReqProhibitUser} from '../../../request/index'
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.Registerform.checkPass !== "") {
          this.$refs.form.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.Registerform.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      users: [],
      formLabelWidth: "120px",
      addManageVisible: false,
       radioArr: [
        {
          name: "管理用户",
          id: "9"
        },
        {
          name: "合作伙伴",
          id: "10"
        }
      ],
      Registerform: {
        dutyParagraph: "",
        company: "",
        email: "",
        password: "",
        checkPass: "",
        telphone: "",
        username: "",
        radio: "11"
      },
       registerRules: {
        dutyParagraph: [
          { required: true, message: "请输入税号", trigger: "blur" }
        ],
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" }
        ],
        email: [
          { required: true, message: "请输入邮箱地址", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"]
          }
        ],
        telphone: [
          { required: true, message: "请输入公司名称", trigger: "blur" }
        ],
        company: [
          { required: true, message: "请输入联系方式", trigger: "blur" }
        ],
        password: [
          { required: true, validator: validatePass, trigger: "blur" }
        ],
        checkPass: [
          { required: true, validator: validatePass2, trigger: "blur" }
        ]
      },
      username:''
    };
  },
  components: {
    SelfTitle,
  },
  methods: {
    // 进入更多信息的详情
    enterMoreUserInfo(id) {
      this.$router.history.push(
        `/self/manage/userAdminInfoMobel?id=${id}`
      );
    },
    // 删除用户
    async deleteManageUser(data) {
      console.log(data);
      this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await ReqDeleteUser(data.row.id);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          await this.reqadminList();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 修改状态
    async findShopFans(id, status) {
      console.log(id, status);
      let result = await ReqProhibitUser({ id, status });
      const { msg } = result;
      if (msg === "success") {
        this.$message({
          message: "修改用户状态成功",
          type: "success",
        });
       await this.reqadminList();
      }
    },
    createManageUser() {
      this.addManageVisible = true;
    },
    // 获取管理员
    async reqadminList(){
      let res = await ReqadminList();
      this.users = res.page.list;
    },
     // 查看用户
    seeUser() {
      this.$router.history.push("/self/manage/ManUser");
    },
    // 注册用户
     async register() {
      let data = {
        email: this.Registerform.email,
        id: "",
        password: this.Registerform.password,
        status: 0,
        telephone: this.Registerform.telphone,
        userType: this.Registerform.radio,
        username: this.Registerform.username
      };
      let registerInfo = await ReqRegister(data);
      if (registerInfo.msg === "success") {
        this.$message({
          showClose: true,
          message: "恭喜你，注册成功",
          type: "success"
        });
        this.reqadminList()
        this.Registerform.email = "";
        this.Registerform.password = "";
        this.Registerform.telphone = "";
        this.Registerform.username = "";
        this.Registerform.checkPass = "";
        this.registerFormVisiblePhone = false
        this.registerFormVisible = false
      } else {
        this.$message({
          showClose: true,
          message: "注册失败",
          type: "error"
        });
      }
    },
    // 根据姓名搜索管理员
    async resSearchAdmin(){
     if(this.username==''){
       this.$message({
         type:'info',
         message:"请输入姓名"
       })
     }else{
       let data ={
         username:this.username
       } 
       let res= await ReqSearchAdmin(data)
       this.users = res.data
     }
    },
    // 取消搜索
    cancelSearch(){
      this.reqadminList();
      this.username =''
    }
  },
  created(){
    this.reqadminList()
  }
};
</script>

<style scoped>
@import url("~@/assets/styles/manage/user.css");
.addManageInput {
  display: flex;
}
.addManageInput .el-input {
  margin-right: 10px;
}
.create-user-box h2 {
  color: white;
  text-align: center;
  font-weight: 600;
  font-size: 20px;
  margin-bottom: 30px;
}
.create-user-box .el-form {
  margin: 0px 40px;
}

.ul-isShowMob li{
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #eee;
}
.ul-isShowMob li:hover{
  background: #efefef;
}
.ul-isShowMob li>:nth-child(1){
  padding: 0 20px;
  font-size: 25px;
}
.ul-isShowMob li>:nth-child(2){
  font-size: 14px;
}
@media screen  and (max-width:768px){
  .tableBox{
    display: none;
  }
}
</style>
